<template>
  <view class="card-info">
    <view class="top-info">
      <view class="top-info-a">接待人次</view>
      <view style="flex:1"></view>
      <view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">近七天
      </view>
      <view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">近一月
      </view>
      <view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">近三月
      </view>
      <view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">近半年
      </view>
    </view>
    <echarts :eChartId="'eChartTwo'" ref="echartsRef"></echarts>
  </view>
</template>

<script>

export default {
  data() {
    return {
      selectIndex: 1,
      option: {}
    };
  },
  mounted() {
    let that = this
    setTimeout(function (){
      that.initData()
    }, 500)
  },
  methods: {
    initData() {
      this.$api.peopleReceptionPeople({dateType: this.selectIndex}).then(res => {
        this.info = res.data;
        this.initEcharts()
      });
    },
    initEcharts() {
      let that = this
      let xArr = []
      let dataArr = []
      for (let i = 0; i < this.info.length; i++) {
        let obj = this.info[i]
        xArr.push(obj.date)
        dataArr.push(obj.peopleNum)
      }
      this.option = {
        grid: {
          top: "15%",
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true
        },
        title: {
          //text: 'ECharts 入门示例'
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          axisLine: {show: false},
          data: xArr,
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
        },
        yAxis: {
          axisLine: {show: false},
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
        },
        series: [{
          name: '接待人次',
          type: 'line',
          data: dataArr,
          smooth:true,
          areaStyle: {
            normal: {
              //渐变色
              color: "rgba(45, 96, 255, 0.1)"
			  // new echarts.graphic.LinearGradient(
			  //     0,
			  //     0,
			  //     0,
			  //     1,
			  //     [
			  //       {
			  //         //波形图渐变色样式
			  //         offset: 0,
			  //         color: "rgba(45, 96, 255, 0.5)"
			  //       },
			  //       {
			  //         offset: 0.8,
			  //         color: "rgba(45, 96, 255, 0.1)"
			  //       }
			  //     ],
			  //     false
			  // )
            }
          },
          color: '#246EFF'
        }]
      }
      this.$refs.echartsRef.changeChart(this.option,2, [[0, 'rgba(45, 96, 255, 0.5)'], [1, 'rgba(45, 96, 255, 0.1)']])
    },
    selectChange(index) {
      this.selectIndex = index
      this.initData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

</style>
